<template>
	<view>
		<view>
			<fui-form ref="form">
				<view style="padding:10rpx;padding-left:0rpx;">
					<fui-input size="26" :borderBottom="true" v-model="formData.workName"
						placeholder="给作品起个名字吧"></fui-input>
				</view>
				<fui-textarea size="26" v-model="formData.workMemo" placeholder="和大家分享分享作品背后的故事(选填)"></fui-textarea>
				<view style="padding:20rpx;">
					<fui-upload immediate :sizeType='sizeType' :sourceType='sourceType' :url="uploadUrl" ref="upload"
						:fileList="fileList" width="200" height="200" @success="uploadSuccess" @error="uploadError"
						@complete="uploadComplete" Right></fui-upload>
				</view>
				<fui-form-item>
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<text style="font-size: 26rpx;">填加位置获得更多曝光</text>
						<fui-input size="26" v-model="formData.workAddr" :borderBottom="false" :padding="[0]"
							placeholder="请输入合作地点(选填)" textRight></fui-input>
					</view>

				</fui-form-item>
				<fui-form-item>
					<view style="font-size: 26rpx;border-bottom: 1rpx solid #f1f1f1;padding-bottom: 30rpx;">作品标签</view>
					<view style="margin-top: 30rpx;">
						<fui-data-tag multiple mark background="#f4f4f4" :options="workLabels"
							@change="selectLabel"></fui-data-tag>
					</view>
				</fui-form-item>
			</fui-form>
		</view>
		<view style="height:100rpx;"></view>
		<!-- <view class="saveBtns">
			<fui-button background="#FFDD00" width="95%" height="70rpx" color="#000" class="saveBtn" @click="submitOrder">提交发布</fui-button>
		</view> -->

		<view class="saveBtns">
			<view style="width: 90vw; display: inline-block;">
				<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交发布</fui-button>
			</view>
		</view>
		<fui-picker linkage :options="roles" :show="roleShow" @change="changeRole"
			@cancel="cancel('role')"></fui-picker>
		<fui-picker linkage :layer="2" :options="cityOptions" :show="cityShow" @change="changeCity"
			@cancel="cancel('city')"></fui-picker>
		<fui-picker linkage :options="payPrices" :show="priceShow" @change="changePrice"
			@cancel="cancel('price')"></fui-picker>

		<fui-dialog :show="show" :content="content" maskClosable @click="onClick" :buttons="buttons"
			@close="onClose"></fui-dialog>
	</view>
</template>

<script>
	import moment from "@/script/moment.js";
	import cityData from "@/script/city.js";
	//校验规则
	const rules = [];
	export default {
		data() {
			return {
				sizeType: ['compressed'],
				labelid: 0,
				workLabels: [],
				minData: moment().format("YYYY/MM/DD"),
				formData: {
					formOrder: 'works',
					workName: '',
					workMemo: '',
					workLabels: [],
					workAddr: '',
					worksUrls: []
				},
				uploadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				uploadStatus: {},
				fileList: [],
				uploadUrls: [],
				title: '已成功提交',
				content: '作品已提交成功，请您耐心等待系统审核！',
				show: false,
				buttons: [{
						text: '返回首页',
						color: '#666'
					},
					{
						text: '继续发布',
						color: '#666'
					}
				]
			};
		},
		onLoad(options) {
			this.getFormData();
		},
		methods: {
			getFormData() {
				this.$httpost('/Form/WorksOrder', {
					'labelid': this.labelid
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.workLabels = res.data.worksLabel
					}
				})
			},
			uploadSuccess(e) {
				// console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.uploadStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			uploadComplete(e) {
				this.uploadStatus = e.status
				this.uploadUrls = e.urls
				this.formData.worksUrls = e.urls
				if (this.uploadStatus === 'success' && e.action === 'upload') {
					// this.fui.toast('上传完成！')
					//已上传完成的图片列表 this.urls
					// console.log('this.uploadUrls', this.uploadUrls)
				}
			},
			uploadError(e) {
				this.uploadStatus = e.status
			},
			selectLabel(e) {
				this.formData.workLabels = e.detail.value
			},
			submitOrder() {
				// console.log(this.formData)

				this.$httpost('/Form/submitOrder', this.formData).then(res => {

					// console.log('submitOrder:', res);
					if (res.code == 200) {
						// this.$common.showToast("作品发布成功");
						// setTimeout(() => {
						// 	this.$common.goNavPage("/myPages/pages/Works");	
						// }, 1000)
						// this.show = true

						this.$common.showToast("作品发布成功，请等待审核");
						setTimeout(() => {
							// this.$common.goNavPage("/myPages/pages/myYuedan");
							// this.$common.goNavPage("/myPages/pages/submitResults");
							this.$common.goNavPage(`/myPages/pages/submitResults?isClass=2`);
						}, 500)
					}
				})
			},
			onClick(e) {
				if (e.index == 0) {
					this.$common.goSwtPage("/pages/index/index");
				}
				if (e.index == 1) {
					this.$common.goSwtPage("/pages/release/index");
				}
			}
		}
	}
</script>

<style lang="scss">
	.saveBtns {
		// width:100vw;
		// position: fixed;
		// z-index: 100;
		// bottom: 0rpx;

		// width:100vw;
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.saveBtn {
		margin: auto;
	}
</style>